<template>
  <div>
    <table border="0" cellPadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>设备</th>
          <th>装置</th>
          <th>异常描述</th>
          <th>分配</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in items" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.equipment}}</td>
          <td>
            <button class="tips">{{item.text}}</button>
          </td>
          <td>
            <van-button type="info" size="small" @click="appoint"> 分发 </van-button>
            &nbsp; &nbsp;
            <van-button type="info" size="small" @click="detail(item)"> 详情 </van-button>
            
          </td>
        </tr>
      </tbody>
    </table>
    <van-popup v-model="showPicker" position="bottom" get-container="body">
      <van-picker
        title="请选择处理人"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "awaitAppoint",
  data (){
    return {
      columns: ['刘洪建', '姜淑华', '王雪建', '张玉', '尹振群', '王方晓'],
      items:[
        {name:'精车3',equipment:'油雾装置',text:'脉冲频率低于正常值',status:1},
        {name:'精车3',equipment:'油雾装置',text:'柱塞系统储油罐漏油',status:1},
        {name:'精车3',equipment:'油雾装置',text:'脉冲阀固定没有牢固',status:1},
        {name:'精车3',equipment:'精车空调',text:'空调表面不整洁',status:1},
        {name:'精车3',equipment:'精车空调',text:'风扇运转有异响',status:1},
        {name:'精车3',equipment:'液压装置',text:'油箱滤网不完整',status:2},
        {name:'精车3',equipment:'液压装置',text:'液位计不清晰',status:2},
        {name:'精车3',equipment:'液压装置',text:'液压泵漏油',status:2},
        
      ],
      showPicker: false,
    }
  },
  methods:{
    appoint(){
      this.showPicker = true;
    },
    onConfirm(value, index) {
      this.showPicker = false;
      this.$toast.success('分配成功！');
    },
    detail(item){
      this.$router.push({
        name:'taskDetail',
        params:item
      })
    }
  }
};
</script>
<style scoped lang="less">
table {
  width: 100%;
  padding: 0 5px 0 3px;
  background-color: #fff;

}
table tr th {
  color: #646566;
  font-weight: 300;
  padding: 0.3rem 0.1rem;
  font-size: 0.4rem;
  border-bottom: 1px solid #7f7f7f;
}
.tips{
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #ff976a;
  }
table tr td {
  color: #646566;
  padding: 16px 0;
  text-align: center;
  font-size: 0.373333rem;
  border-bottom: 1px solid #7f7f7f;
 button {
    border-radius: 5px;
    padding: 4px 5px;
    border: none;
    color: #fff;
    background-color: #169bd5;
  }
 
}
</style>